CSS浮動（Floating）

用於將元素從正常的文檔流中移出，使其可以自由浮動在其容器內。這意味著元素將被放置在容器的左側或右側，並且其他內容將繞過它。浮動元素可以是圖像、文本、區塊元素等，像是word上的文繞圖排版

使用 float 屬性來控制我們要的元素，常見的值有：

• left：使元素浮動到左側。
• right：使元素浮動到右側。

範例: 將圖像浮動到左側且繞過文本：

/*css*/
img {
  float: left;
}

<!--html-->
<div>
  <img src="https://i.imgur.com/eNosu2R.jpeg)" alt="圖片">
  <p>我會繞過圖片顯示區域不會遮擋住圖片。</p>
</div>

• 常見用途:

圖像佈局： 讓圖像浮動來實現圖像、文本的簡單佈局，使內容更有吸引力。
多列佈局： 通過浮動元素，可以做出像新聞網站的多欄目內容顯示效果。
導航菜單： 可以創建水平或垂直導航菜單讓用戶能更直觀的了解網站的主體與應用。

CSS定位（Positioning）

使用 position 屬性通過指定元素的位置屬性來控制元素位置。

• 相對定位（Relative Positioning）：
  使元素相對於其正常位置移動，但仍然占據原始文檔流中的空間。

範例:

/* CSS */
.relative-box {
  position: relative;
  left: 20px;
  top: 10px;
  background-color: lightyellow;
  width: 200px;
  height: 100px;
}

<!-- html -->
<div class="relative-box">
  <p>這是相對定位的範例圖</p>
</div>

• 絕對定位（Absolute Positioning）：
  使元素相對於其最近的已定位父元素移動，如果沒有已定位的父元素，則相對於文檔的視口移動。元素不占據正常文檔流中的空間。

範例:

/* CSS */
.relative-container {
  position: relative;
  width: 300px;
  height: 150px;
  background-color: lightcyan;
}

.absolute-box {
  position: absolute;
  left: 50px;
  top: 30px;
  background-color: lightblue;
  width: 150px;
  height: 80px;
}

<!-- html -->
<div class="relative-container">
  <div class="absolute-box">
  <p>這是絕對定位的範例圖</p>
  </div>
</div>

• 固定定位（Fixed Positioning）：
  使元素相對於視口移動，元素的位置在滾動頁面時不會改變。
  常用在建立固定的導航菜單或頁面頂部。

範例:

/* CSS */
.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: lightseagreen;
  width: 150px;
  height: 80px;
}

<!-- html -->
<div class="fixed-box">
<p>這是固定定位的範例圖</p>
</div>

範例圖:

• 常見用途:

瀏覽器通知條： 可以創建在瀏覽器頂部顯示的通知條。
彈出菜單： 可以創建出現在指定位置的彈出菜單。
元素重疊： 使用兩種定位可以實現元素的重疊，創建出理想的佈局效果。

這裡有好用的CSS demo網站

今天介紹到這邊，感謝觀看!